<template>
	<view class="box">
		<view class="com">
			<view class="ct flex align-center justify-between" @click.stop="goAddr">
				<text class="tl">邮寄信息</text>
				<view class="tr">
					<text class="trt" v-if="receiver?.name && receiver?.phone">修改</text>
					<text class="trt" v-else>请添加邮寄信息</text>
					<text class="tri cuIcon cuIcon-right"></text>
				</view>
			</view>
			<view class="ci-item" v-if="receiver?.name">
				<view class="citem-l">
					收货人:
				</view>
				<view class="citem-r">
					{{ receiver.name || '' }}
					<text class="phone">{{ receiver.phone || '' }}</text>
				</view>
			</view>
			<view class="ci-item cuaddr" v-if="receiver?.province">
				<view class="citem-l">
					收货地址:
				</view>
				<view class="citem-r">
					{{ receiver.province || '' }}
					{{ receiver.city || '' }}
					{{ receiver.area || '' }}
					{{ receiver.street || '' }}
					{{ receiver.address || '' }}
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
const {proxy} = getCurrentInstance();
const props = defineProps({
	receiver: {
		type: Object,
		default: {}
	}
})
const {
 receiver
} = toRefs(props)

function goAddr() {
	if(props.receiver && props.receiver.id) {
		proxy.$go(`/pages-user/addr/list?from=2`)
	} else {
		proxy.$go(`/pages-user/addr/make?from=2`)
	}
}


</script>

<style lang="scss" scoped>
.com {
	width: 100%;
	height: auto;
	margin-bottom: 24rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 24rpx 24rpx 0;

	.ct {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		padding-bottom: 24rpx;

		.trt,
		.tri {
			font-size: 26rpx;
			font-weight: normal;
			color: #666;
		}
	}

	.ci-item {
		color: #000;
		display: flex;
		padding-bottom: 24rpx;
		padding-left: 24rpx;
		align-items: center;
		.citem-l {
			width: 130rpx;
			font-size: 26rpx;
		}

		.citem-r {
			flex: 1;
			font-size: 26rpx;
		}

		.phone {
			margin-left: 30rpx;
		}

		.cuaddr{
			align-items: flex-start;
			position: relative;
			top: 2rpx;
		}
	}
}

.pay-pop {
	padding: 30rpx;
	position: relative;
	background-color: #fff;
	text-align: left;
	.close-box {
		width: 80rpx;
		line-height: 80rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
		text-align: center;
		.cuIcon {
			font-size: 32rpx;
		}
	}

	.gobtn {
		width: 100%;
		background-color: $main_color;
		color: #fff;
		height: 90rpx;
	}

	.title {
		
		text-align: center;
		font-size: 30rpx;
		color: #000;
		padding-bottom: 30rpx;
	}
	.cu-form-group{
		.title{
			text-align: left;
			width: 140rpx;
		}
		.title, .ipt{
			font-size: 26rpx;
		}
		
	}
}
</style>